<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- コンテナをロード -->
  <script type="text/javascript" src="../src/container.js" ></script>
</head>
<body>
  <div id="stdout"></div>
  <script type="text/javascript">
var stdout = document.getElementById( "stdout" );

// クラス
function Kitten() {}
Kitten.prototype = {
   getName: function () { return this.name; }
};

// コンテナを作成。
var c = new container.Container( function( binder ) {
  // 同じ名前で複数のコンポーネントを登録
  binder.bind( Kitten ).to( "kittens" ).inject( { "name":"mii"});
  binder.bind( Kitten ).to( "kittens" ).inject( { "name":"kuro"});
  binder.bind( Kitten ).to( "kittens" ).inject( { "name":"shiro"});
});

// gets()でコンテナからすべてのコンポーネントを取得する。
var kittens = c.gets( "kittens" );
stdout.innerHTML += kittens[0].getName() + "<br/>"; // "mii"
stdout.innerHTML += kittens[1].getName() + "<br/>"; // "kuro"
stdout.innerHTML += kittens[2].getName() + "<br/>"; // "shiro"

// get()の場合、最初に登録したコンポーネントが返される。
var kitten = c.get( "kittens" );
stdout.innerHTML += kitten.getName(); // "mii"

  </script>
</body>
</html>